<template>
	<div class="assetsOrder">
		<van-nav-bar class="nav-bar" :title="吃了么红包" left-text="返回" left-arrow @click-left="onClickLeft" />
		
		<div class="assetsOrder-data">
			<van-collapse v-model="activeNames">

				<div class="assetsOrder-list" v-for="(itme) in list" :key="itme">
					<div class="listOrder-top">
						<div class="listOrder-left">
							<span>{{ itme.cashCouponName }}</span>
							<span>有效期至{{ itme.deadline }}</span>
						</div>
						<div class="listOrder-right">
							<span><span>￥</span><span class="right-jine">{{ itme.preferentialAmount }}</span></span>
							<span>满{{ itme.threshold }}可用</span>
						</div>
						<div class="fuxuankuang">
							<van-checkbox checked-color="#ee0a24" @click="fuXuanKuang(itme.preferentialAmount,count)"
								v-model="itme.checkeds"></van-checkbox>
						</div>
					</div>
					<van-divider class="xuxian" dashed :style="{borderColor: '#000000'}"></van-divider>
					<div class="listOrder-bottom">
						<van-collapse-item class="listOrder-jieshao" title="使用介绍">
							{{ itme.introductionToUse }}
						</van-collapse-item>
					</div>
				</div>
			</van-collapse>
		</div>
    <div class="yishiyong" @click="getUse()">
      <span>查看无效券</span>
    </div>
		<div class="assetsorder-bottom">
			<div class="listOrder-bottom">
				<div class="youhui">红包优惠￥{{preferentialAmount}}</div>
				<van-button class="bottom" @click="getQuShiYong(preferentialAmount,cartId,orderNumber,dishesId,shopId,userId,number,orderPrice)" type="danger">确认</van-button>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		ref
	} from 'vue';

	export default {
		name: "MyAssetsOrderList",
		data() {
			return {
				dishesId:this.$route.query.dishesId,
				shopId: this.$route.query.shopId,
				userId: 2,
				number:this.$route.query.number,
				orderPrice:this.$route.query.orderPrice,
				cartId: '',
				orderNumber: 21,
				list: [],
				activeNames: ref(['0']),
				preferentialAmount: 0,
				count: 1
			}
		},
		mounted() {
			this.getMyAssetsList();
		},
		methods: {
			getMyAssetsList() {
				// let zongjine =this.$route.query.zongjine;
				//let zongjine = 21;
				this.$axios.get('/assets/sel')
					.then(res => {
						this.cartId = this.$route.query.cartId
						this.orderNumber = this.$route.query.orderNumber
						this.list = res.result.select.filter(item => {
							if (item.shopId == 0) {
								return true;
							}
						});
						console.log(this.list);
					})
			},
      /*getMyAssetsUpd(deadline) {
        this.$axios.get('/assets/upd', {
          params: {
            // userId: 1,
            deadline: deadline
          }
        })
      },
      getCurrentTime() {
        //获取当前时间并打印
        var _this = this;
        let yy = new Date().getFullYear();
        let mm = new Date().getMonth() + 1;
        let dd = new Date().getDate();
        let hh = new Date().getHours();
        let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
        let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
        _this.gettime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss;
        this.getMyAssetsUpd(_this.gettime);
      },*/
			getQuShiYong(preferentialAmount,cartId,orderNumber,dishesId,shopId,userId,number,orderPrice) {
				this.$router.push({
					path: '/submitInfo',
					query: {
						preferentialAmount: preferentialAmount,
						cartId: cartId,
						orderNumber: orderNumber,
						dishesId:dishesId,
						shopId: shopId,
						userId: 2,
						number:number,
						orderPrice:orderPrice,
					}
				});
				// alert(preferentialAmount)
			},
			fuXuanKuang(preferentialAmount, count) {
				this.count = count + 1;
				if (count % 2 == 0) {
					this.preferentialAmount = 0;
				} else {
					this.preferentialAmount = preferentialAmount;
				}
			},
			onClickLeft(){
				history.back()
			},
      getUse(){
        this.$router.push('/used');
      }
		},
	}
</script>

<style scoped>
	.assetsOrder {
		background: #F2F2F2;
		display: flex;
		flex-direction: column;
		font-family: "楷体";
	}


	.assetsOrder-top span:nth-of-type(1) {
		margin-left: 20px;
		margin-right: 20px;
	}

	.assetsOrder-top span:nth-of-type(2) {
		font-weight: 700;
	}

	.right-jine {
		font-size: 28px;
	}

	.assetsOrder-data {
		margin-top: 50px;
	}

	.assetsOrder-list {
		background: #FFFFFF;
		height: 145px;
		width: 95%;
		border-radius: 10px;
		margin: auto;
		margin-bottom: 10px;
	}

	.listOrder-top {
		display: flex;
		flex-direction: row;
		padding-top: 10px;
	}

	.listOrder-left {
		display: flex;
		flex-direction: column;
		width: 95%;
	}

	.listOrder-left span:nth-of-type(1) {
		font-size: 20px;
		font-weight: bold;
	}

	.listOrder-left span:nth-of-type(2) {
		font-size: 14px;
		font-weight: 500;
	}

	.listOrder-right {
		color: red;
		display: flex;
		flex-direction: column;
	}

	.xuxian {
		width: 98%;
		margin: auto;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.listOrder-bottom {
		display: flex;
		flex-direction: row;
	}

	.listOrder-jieshao {
		width: 95%;
		border-radius: 10px;
	}

	.assetsorder-bottom {
		height: 30px;
		width: 100%;

	}

	.listOrder-bottom {
		display: flex;
		flex-direction: row;
		margin-left: 2.5%;
	}

	.bottom {
		width: 20%;
		border-radius: 0 20px 20px 0;
	}

	.youhui {
		color: white;
		background-color: black;
		width: 75%;
		border-radius: 20px 0 0 20px;
		padding-top: 10px;
	}

  .yishiyong{
    margin: auto;
  }
</style>
